<script setup lang="ts">
import {ref, onMounted, reactive} from "vue";
import {alarmNum} from "@/api";
import {graphic} from "echarts/core";
import {ElMessage} from "element-plus";
import CountUp from "@/components/count-up";

const getData = () => {
  alarmNum()
      .then((res) => {
        console.log("右上--报警次数 ", res);
        if (res.success) {

        } else {
          ElMessage({
            message: res.msg,
            type: "warning",
          });
        }
      })
      .catch((err) => {
        ElMessage.error(err);
      });
};
const ranking = reactive({
  paper: [
    {rank: 1, title: "西园里", numb: 872},
    {rank: 2, title: "隐秀苑", numb: 765},
    {rank: 3, title: "滨湖南苑", numb: 464}
  ],
  can: [
    {rank: 1, title: "西园里", numb: 554},
    {rank: 2, title: "隐秀苑", numb: 421},
    {rank: 3, title: "滨湖南苑", numb: 225}
  ],
  bottle: [
    {rank: 1, title: "隐秀苑", numb: 965},
    {rank: 2, title: "滨湖南苑", numb: 574},
    {rank: 3, title: "西园里", numb: 458}
  ],
});

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="main-content">
    <div class="user_Overview-item">
      <span class="top-title" style="color: rgb(255,255,255)">纸板类<span>TOP3</span></span>
      <ul class="line_data flex">
        <li class="line_data-item flex" style="color: rgb(252,204,68)">
          <div class="user_Overview_nums rank_top">
          </div>
          <p>{{ ranking.paper[0].title }}</p>
        </li>
        <li class="line_data-item flex" style="color: rgb(239,239,239)">
          <div class="user_Overview_nums rank_second">
          </div>
          <p>{{ ranking.paper[1].title }}</p>
        </li>
        <li class="line_data-item flex" style="color: rgb(252,203,149)">
          <div class="user_Overview_nums rank_third">
          </div>

          <p>{{ ranking.paper[2].title }}</p>
        </li>
      </ul>
    </div>
    <div class="user_Overview-item">
      <span class="top-title" style="color: rgb(255,255,255)">易拉罐<span>TOP3</span></span>
      <ul class="line_data flex">
        <li class="line_data-item flex" style="color: rgb(252,204,68)">
          <div class="user_Overview_nums rank_top">
          </div>
          <p>{{ ranking.can[0].title }}</p>
        </li>
        <li class="line_data-item flex" style="color: rgb(239,239,239)">
          <div class="user_Overview_nums rank_second">
          </div>
          <p>{{ ranking.can[1].title }}</p>
        </li>
        <li class="line_data-item flex" style="color: rgb(252,203,149)">
          <div class="user_Overview_nums rank_third">
          </div>

          <p>{{ ranking.can[2].title }}</p>
        </li>
      </ul>

    </div>
    <div class="user_Overview-item">
      <span class="top-title" style="color: rgb(255,255,255)">塑料瓶<span>TOP3</span></span>
      <ul class="line_data flex">
        <li class="line_data-item flex" style="color: rgb(252,204,68)">
          <div class="user_Overview_nums rank_top">
          </div>
          <p>{{ ranking.bottle[0].title }}</p>
        </li>
        <li class="line_data-item flex" style="color: rgb(239,239,239)">
          <div class="user_Overview_nums rank_second">
          </div>
          <p>{{ ranking.bottle[1].title }}</p>
        </li>
        <li class="line_data-item flex" style="color: rgb(252,203,149)">
          <div class="user_Overview_nums rank_third">
          </div>

          <p>{{ ranking.bottle[2].title }}</p>
        </li>
      </ul>

    </div>
  </div>

</template>

<style scoped lang="scss">
.main-content {
  height: 100%;
  padding: 40px 0 0 20px;

  .user_Overview-item {
    height: 30%;

    .top-title {
      font-size: 20px;
      font-weight: bold;
      color: #00fff8;
      span{
        margin-left: 10px;
        color: red;
        font-size: 32px;
        font-weight: bolder;
      }
    }
  }

  .line_data {
    width: 100%;
    height: 100%;
    margin: 10px 10px;

    text-align: center;

    li {
      flex: 1;
      font-size: 16px;
      font-weight: bolder;

      .countup-wrap {
        font-size: 32px;
      }

      p {
        text-align: center;
        height: 16px;
        font-size: 20px;
        flex: 1;
        line-height: 60px;
      }

      .user_Overview_nums {
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 100px;
        font-size: 22px;
        background-size: cover;
        background-position: center center;
        position: relative;

        &::before {
          width: 100%;
          height: 100%;
          background-size: cover;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      .rank_top {
        &::before {
          background-image: url("@/assets/img/right_top_top.png");
        }
      }

      .rank_second {
        &::before {
          background-image: url("@/assets/img/right_top_second.png");
        }
      }

      .rank_third {
        &::before {
          background-image: url("@/assets/img/right_top_third.png");
        }
      }
    }
  }
}

</style>
